<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left" @click="back">
					<img src="../assets/image/return.png" />
				</div>
				<div class="add">
					编辑资料
				</div>
				<div @click="skiptophoto">
					下一步
				</div>
			</div>

		</div>
		<div class="lists">

			<!--              
              <el-upload
  class="avatar-uploader a flex"
  action="http://api.heruinet.com/index.php/waveguest/storemy/store_url"
  name="image"
  :show-file-list="false"
  :before-upload="beforeAvatarUpload"
  :on-error="uploadError"
  :http-request="uploadFile"
:on-success="handleAvatarSuccess"
  >

  <div id="dingwer">
  	 <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  <img style="width: 0.86956rem;height: 0.8659rem;position: absolute;bottom: 0rem;right:0rem;" src="../assets/image/xaingji.png"/>
  </div>
 
</el-upload>-->

			<!--<div class="file_box ">
			<span class='upload'>
				<input type="file" name="" id="" value="" name="saveFile" @change="tirggerFile($event)"/>
         	    <img :src="imageUrl" alt="" />
				<i  v-show="!imageUrl" >添加图片</i>
			</span>
		</div>-->
			<div class="headImg flex" @click.stop="uploadHeadImg">
				<div class="headImg-box flex">
					<img v-if="avator" :src="avator" />
						<img v-else src="../assets/image/logo.png"/>
				</div>
				<input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
			</div>
			<!--<div class="headImg">
			<ul class="flex">
				<li>头像</li>
				<li class="flex"  @click.stop="uploadHeadImg">
					<div class="headImg-box">
						<img :src="imageUrl" />
					</div>
					<img class="left" src="../images/rc.png" />
					<input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
				</li>
			</ul>
		</div>-->

			<div class="inp">
				<p>商铺电话</p>
				<input type="text" v-model="store_phone" placeholder="请输入手机号" />
			</div>
			<div class="inp">
				<p>商铺地址</p>
				<img src="../assets/image/address.png" />
				<input type="text" v-model="store_address" placeholder="请输入地址" />
			</div>
			<div class="inp">
				<p>店铺介绍</p>
				<textarea v-model="store_description" maxlength="500" onchange="this.value=this.value.substring(0, 500)" onkeydown="this.value=this.value.substring(0, 500)"
				 onkeyup="this.value=this.value.substring(0, 500)" placeholder="请输入店铺介绍(限500字)">

			  </textarea>
			</div>
		</div>
	</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				avator: '',
				store_phone: '',
				store_address: '',
				store_description: '',
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},

			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},
			handleAvatarSuccess(res, file) {
				console.log(res)
				console.log(file)
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			uploadFile(file) {
				console.log(file)

			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			uploadError(err, file, fileList) {
				this.videoFlag = false;
				console.log(file)
				this.$message.error("上传出错");
			},
			// skiptophoto() {
			// 	this.$router.push({
			// 		path: '/photo'
			// 	});
			// },
			uploadError(err, file, fileList) {
				this.videoFlag = false;
				this.$message.error("上传出错");
			},

         skiptophoto() {
				var that = this;
				if (that.store_phone) {} else {
					this.$message.error('商铺电话不能为空');
					return;
				}
				if (that.store_address) {} else {
					this.$message.error('商铺地址不能为空');
					return;
				}
				var qs = require('qs');
				that.$http.post(this.baseURL + "/index.php/waveguest/storemy/store_url", qs.stringify({
					"image": that.avator,
					"store_id":localStorage.getItem("store_id"),
					"key":localStorage.getItem("key")
				})).then(response => {
					console.log(response.status)
					if (response.status == 200) {
						that.avator = response.data.data
						this.updata_detail()
					}else{
						this.$message.error('上传头像失败');
						return;
					}
				}).catch(error => {

				});

			},
			updata_detail(){
				  var that=this;
			
			
				var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/storemy/update_store", qs.stringify({
						"store_id":localStorage.getItem("store_id"),
						"store_phone":that.store_phone,
						  "store_address":that.store_address,
						  "store_description":that.store_description,
						  "key":localStorage.getItem("key")

					})).then(response => {
						console.log(response)
						if(response.data.status=="200"){
							this.$router.push({
					path: '/photo'
				});
						}else{
							 this.$message.error(response.data.message);
						}
                    
						
					})
					.catch(error => {

					});
					

			},
			// 打开图片上传
			uploadHeadImg() {
				this.$el.querySelector('.hiddenInput').click()
			},
			// 将头像显示
			handleFile(e) {
				console.log(e)
				var that = this;
				var imgSize = 2000 * 1024; //1KB=1024B字节
				let $target = e.target || e.srcElement
				let file = $target.files[0]

				if (file.size > imgSize) {
					UI.message.warn("图片大小不能超过2MB")
					return false
				}
				var reader = new FileReader()
				reader.onload = (data) => {
					let res = data.target || data.srcElement
					console.log(res)
					that.avator = res.result
					// console.log(that.nameRes.avator )
				}
				reader.readAsDataURL(file)
			},

		},
		mounted() {
			 var _this = this;
             var qs = require('qs');
             _this.$http.post(_this.baseURL + '/index.php/waveguest/storemy/show_store',qs.stringify({'store_id':localStorage.getItem("store_id"),"key":localStorage.getItem("key")})).then(response => {
             	console.log(response)
             	_this.store_address = response.data.data.store_address
             	_this.store_description = response.data.data.store_description
             	_this.store_phone = response.data.data.store_phone
             	_this.avator=response.data.data.store_logo
             	
             }).catch(error => {
             
             });
		},
	}
</script>

<style>
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
</style>
<style scoped="scoped">
	.hiddenInput {
		display: none;
	}

	.headImg {
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 3.65217rem;
	}

	.headImg-box {
		width: 3.65217rem;
		height: 3.65217rem;
		border-radius: 50%;
		overflow: hidden;
		justify-content: center;
		align-items: center;
	}

	.headImg-box>img {
		width: 100%;
		height: 100%;
	}

	.active {
		width: 100%;
		max-width: 640px;
		background: white;
		padding-bottom: 2rem;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: -1;
	}

	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.a {
		justify-content: center;
		align-items: center;


	}

	/deep/.avatar {
		width: 3.65217rem;
		height: 3.65217rem;
		border-radius: 50%;
		border: 1px solid;
		background: url(../assets/image/logo.png) no-repeat;
		background-size: 100%;

	}

	#dingwer {
		position: relative;
		width: 3.65217rem;
		height: 3.65217rem;

	}

	.lists {
		padding: 2rem;

	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}

	.title div {
		width: calc(100%/3);
		align-items: center;
	}

	.title>div:nth-child(2) {
		text-align: center;
	}

	.title>div:nth-child(3) {
		text-align: right;
		font-size: 0.65217rem;
		color: #007AFF;
	}

	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.logo img {
		width: 3.65217rem;
		height: 3.65217rem;
	}

	.logo {}

	.inp {
		padding-top: 1.5rem;
		position: relative;
	}

	.inp>p {
		color: #D1D5D8;
		font-size: 0.65217rem;
		padding-bottom: 1rem;
	}

	.inp img {
		width: 0.8478rem;
		height: 0.8913rem;
		position: absolute;
		right: 0;
		bottom: 0.3rem;
	}

	.inp>input {
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray;
		font-size: 0.65217rem;
	}

	.btns {
		width: 100%;
		height: 2.1913rem;
		background: #007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 1.3043rem;
	}

	.skip {
		padding: 1rem 0.5rem;
		justify-content: space-between;
		font-size: 0.60869rem;
		color: #3E474E;
	}

	textarea {
		width: 100%;
		height: 4.9565rem;
		background: #FAFAFA;
		padding: 0.3rem;
	}
</style>
